<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>1.逛水果店</title>
  </head>
  <body>
    <div id="app">
      <h2>请选择你喜欢的专栏</h2>
      <span v-for="item in list" :key="item">
        <!-- 绑定复选框的值到当前项，并将选中的值存储在 selectedItems 数组中 -->
        <!-- 在复选框上使用 v-model 并结合 :value 属性时，选中的值会自动存储到指定的数组中。 -->
        <input type="checkbox" :value="item" v-model="selectedItems" />
        {{ item }}
        <!-- 显示当前项的名称 -->
      </span>
      <ul v-if="selectedItems.length > 0">
        <!-- 如果 selectedItems 数组中有选中的项，则显示列表 -->
        <li v-for="(selectedItem, index) in selectedItems" :key="index">
          {{ selectedItem }}
          <!-- 显示每个选中的项 -->
        </li>
      </ul>
    </div>
    <script src="../vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          list: [
            "科幻",
            "喜剧",
            "动漫",
            "冒险",
            "科技",
            "军事",
            "娱乐",
            "奇闻",
          ],
          selectedItems: [],
        },
        methods: {},
      });
    </script>
  </body>
</html>
